<script setup>
import { useFileSelect } from "@/composables/fileSelect.js";
import { computed, ref, watch, computed } from "vue";
import { VueCropper } from "vue-cropper";
import CommonModal from "@/components/modal/CommonModal.vue";
import { ElMessage } from "element-plus";
import { useCreate } from "@/store/useCreate.js";
import { storeToRefs } from "pinia";

const createStore = useCreate();
const { formData } = storeToRefs(createStore);
const { selectedFile, fileType, triggerFileSelect, uploadFile } = useFileSelect();

watch(selectedFile, (File) => {
  console.log(fileType.value);
  // 把File Blob转成Url
  if (fileType.value === 1) {
    cropOption.value.img = URL.createObjectURL(File);
    imgCropModalShow.value = true;
  }
  if (fileType.value === 2) {
    // 视频上传
    videoUpload(File);
  }
});

const coverPicList = computed(() => {
  return createStore.formData.coverPicList;
});

const videoUpload = async (file) => {
  // 限制视频最大100M
  if (file.size > 100 * 1024 * 1024) {
    return ElMessage.error("视频最大100M");
  }
  // 限制视频格式
  if (file.type !== "video/mp4") {
    return ElMessage.error("只支持上传MP4格式视频");
  }
  try {
    videoUploadLoading.value = true;
    const upload = await uploadFile();
    if (upload && upload.code === 200) {
      createStore.formData.coverPicList[2] = {
        url: upload.data.url,
        type: 2, // 标识视频类型
      };
    } else {
      videoUploadLoading.value = false;
      ElMessage.error("上传失败");
    }
  } catch (e) {
    videoUploadLoading.value = false;
  } finally {
    videoUploadLoading.value = false;
  }
};

const imgCropModalShow = ref(false);
const cropper = ref();
const img = ref("");
const uploadloading = ref(false);
const videoUploadLoading = ref(false);
const cropOption = ref({
  size: 1,
  outputType: "png",
  autoCrop: true, // 是否开启截图框
  full: false, // 是否输出原图比例
  infoTrue: false, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
  img: "",
  fixedNumber: [4, 3],
  fillColor: "#000",
  canMove: true,
  autoCropWidth: 400,
  autoCropHeight: 300,
  fixedBox: true,
});
const videoUrl = computed(() => {
  const coverPicList = createStore.formData.coverPicList;
  if (coverPicList && coverPicList.length > 1) {
    return coverPicList?.url || "";
  }
  return "";
});
// 获取截图blob
const modalConfirm = () => {
  cropper.value.getCropBlob(async (data) => {
    try {
      uploadloading.value = true;
      img.value = URL.createObjectURL(data);
      const upload = await uploadFile(data);
      if (upload && upload.code === 200) {
        createStore.formData.coverPicList[1] = {
          url: upload.data.url,
          type: 1, // 标识图片类型
        };
      } else {
        uploadloading.value = false;
        ElMessage.error("上传失败");
      }
    } catch (e) {
      console.log(e);
      uploadloading.value = false;
    } finally {
      uploadloading.value = false;
    }
  });
  imgCropModalShow.value = false;
};
const delImg = (index) => {
  img.value = "";
  createStore.formData.coverPicList.splice(index, 1);
};
//
const confirm = () => {
  if (!img.value && !video.value) {
    return ElMessage.warning("请上传封面图片或视频,如不填写可自行点击左侧菜单跳过。");
  }
  createStore.setCurrentStepId(9);
};
</script>

<template>
  <div class="header">
    <div class="left">
      <h4>主页头图</h4>
      <p>
        列表封面即为头图1，你还可以继续添加2张头图和1个视频，也可
        <span @click="createStore.setCurrentStepId(9)">跳过此步骤</span>
      </p>
    </div>
    <div>
      <el-button class="confirm-btn" @click="confirm">确认</el-button>
    </div>
  </div>
  <div class="img-video">
    <div class="left">
      <div class="cover-upload">
        <h3 class="title">列表封面</h3>
        <!-- <img :src="img" alt="" style="width: 200px" /> -->
        <div
          class="upload"
          @click="triggerFileSelect"
          v-loading="uploadloading"
          element-loading-text="上传中..."
        >
          <img
            v-if="!createStore.formData.coverPicList[1]"
            class="add-icon"
            src="@/assets/img-icon.png"
            alt=""
          />
          <span class="add-text">+ {{ img ? "替换图片" : "上传图片" }}</span>
          <img
            v-if="createStore.formData.coverPicList[1]"
            class="img-bg"
            :src="createStore.formData.coverPicList[1].url"
            alt=""
          />
          <span
            v-if="createStore.formData.coverPicList[1]"
            class="del-img"
            @click.stop="delImg(1)"
            ><img src="@/assets/del-icon-white.png" alt=""
          /></span>
        </div>
        <p class="tips">提示：</p>
        <p class="tips-text">
          建议上传具有代表性的案例作品，全方位展示个人能力，提升买家购买意愿
        </p>
      </div>
      <div class="cover-upload">
        <div
          class="upload"
          @click="(e) => triggerFileSelect(e, '.mp4', 2)"
          v-loading="videoUploadLoading"
          element-loading-text="上传中..."
        >
          <img
            v-if="!video"
            class="add-icon"
            src="@/assets/video-icon.png"
            alt=""
            style="height: 54px"
          />
          <span class="add-text">+ {{ video ? "替换视频" : "上传视频" }}</span>
          <video v-if="videoUrl" class="img-bg" :src="videoUrl" alt=""></video>
          <span v-if="video" class="del-img" @click.stop="delImg(2)"
            ><img src="@/assets/del-icon-white.png" alt=""
          /></span>
        </div>
        <p class="tips">提示：</p>
        <p class="tips-text">
          建议上传一个服务介绍视频来吸引买家的注意力！(视频最大100M,MP4格式)
        </p>
      </div>
    </div>
    <div class="right">
      <h4>封面预览</h4>
      <div class="view">
        <img src="@/assets/phone-view.png" alt="" />
      </div>
    </div>
  </div>
  <!-- 裁剪图片 -->
  <CommonModal
    title="裁剪图片"
    v-if="imgCropModalShow && selectedFile"
    @confirm="modalConfirm"
    @close="imgCropModalShow = false"
  >
    <template #content>
      <p class="cropper-tips">为确保封面和头图预览视觉效果，图片需裁剪成4：3尺寸</p>
      <div class="cropper-box">
        <vue-cropper
          style="width: 100%; height: 100%"
          ref="cropper"
          :outputSize="cropOption.size"
          :outputType="cropOption.outputType"
          :img="cropOption.img"
          :infoTrue="cropOption.infoTrue"
          :full="cropOption.full"
          :auto-crop="cropOption.autoCrop"
          :fixedNumber="cropOption.fixedNumber"
          :fillColor="cropOption.fillColor"
          :canMove="cropOption.canMove"
          :autoCropWidth="cropOption.autoCropWidth"
          :autoCropHeight="cropOption.autoCropHeight"
          :fixedBox="cropOption.fixedBox"
        >
        </vue-cropper>
      </div>
    </template>
  </CommonModal>
</template>

<style scoped lang="scss">
.header {
  display: flex;
  align-items: center;

  .left {
    flex: 1;

    h4 {
      font-size: 16px;
      margin-bottom: 8px;
    }

    p {
      color: rgba(25, 30, 40, 0.48);
      font-size: 14px;
      span {
        color: #1dbf73;
        cursor: pointer;
      }
    }
  }

  .confirm-btn {
    width: 160px;
    height: 48px;
    background: #1dbf73;
    border-radius: 8px 8px 8px 8px;
    color: #fff;
    font-size: 16px;
    border: none;
  }
}
.img-video {
  display: flex;
  margin-top: 30px;
}
.cover-upload {
  width: 320px;
  flex: 0 0 320px;
  margin-right: 50px;
  margin-bottom: 32px;
  .title {
    font-size: 16px;
    margin-bottom: 24px;
  }
  .upload {
    width: 100%;
    height: 240px;
    background: #f6f8f9;
    border-radius: 16px 16px 16px 16px;
    border: 1px solid rgba(25, 30, 40, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
    .add-icon {
      width: 84px;
      height: 60px;
      margin-bottom: 48px;
    }
    .add-text {
      width: 108px;
      height: 36px;
      background: #ffffff;
      border-radius: 8px 8px 8px 8px;
      border: 1px solid rgba(25, 30, 40, 0.08);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #191e28;
      user-select: none;
      cursor: pointer;
      position: relative;
      z-index: 2;
    }
    .img-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    .del-img {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 2;
      background: rgba(25, 30, 40, 0.4);
      width: 48px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 0 16px 0 16px;
      cursor: pointer;
      img {
        width: 24px;
        height: 24px;
      }
    }
  }
  .tips {
    color: #191e28;
    margin-bottom: 5px;
  }
  .tips-text {
    color: rgba(25, 30, 40, 0.48);
    line-height: 24px;
  }
}
.right {
  flex: 1;
  background: #f9fafb;
  border-radius: 16px 16px 16px 16px;
  padding: 20px 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  h4 {
    width: 100%;
    font-size: 16px;
    margin-bottom: 16px;
    text-align: left;
  }
  .view {
    width: 480px;
    height: 752px;
    position: relative;
    img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }
}

.cropper-tips {
  color: rgba(25, 30, 40, 0.48);
  margin-top: 6px;
  margin-bottom: 16px;
}
.cropper-box {
  width: 500px;
  height: 500px;
}
</style>
